<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#buttons > button {
				background-color: red;
				width: 80px;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<div id="buttons">
			<button><input type="checkbox" disabled">苹果</button>
			<button><input type="checkbox" disabled">香蕉</button>
			<button><input type="checkbox" disabled">草莓</button>
			<button><input type="checkbox" disabled">蓝莓</button>
			<button><input type="checkbox" disabled">榴莲</button>
			<button><input type="checkbox" disabled">西瓜</button>
			<button><input type="checkbox" disabled">芒果</button>
			<button><input type="checkbox" disabled">柠檬</button>
		</div>
		<script>
			const allButtons = document.querySelectorAll('#buttons > button')
			// // 1、2、3普通的for循环
			// for(var i=0;i<allButtons.length;i++) {
			// 	// evt事件，这儿参数能拿到一个对象，这个对象会显示发生过什么操作
			// 	allButtons[i].addEventListener('click',function(evt) {
			// 		//1. 出现错误 i=8
			// 		//var checkbox = allButtons[i].firstChild
			// 		// 修改复选框的状态
			// 		//checkbox.checked = !checkbox.checked
			// 		// allButtons[i].style.backgroundColor=
			// 		// 	checkbox.checked?'green' : 'red'
					
			// 		//2.回调函数（ES5）
			// 		// 我们知道事件发生是要做什么但我们不知道什么时候发生
			// 		// 在这种情况下就需要放置一个回调函数(callback function)
			// 		// 绑定事件是传入的函数回调函数
			// 		// 当浏览器执行该回调函数是传入一个代表事件的对象
			// 		// 通过事件对象的target属性就可以获取到事件源(谁引发了事件)
			// 		var checkbox = evt.target.firstChild
			// 		checkbox.checked = !checkbox.checked
			// 		evt.target.style.backgroundColor=
			// 			checkbox.checked?'green' : 'red'
						
			// 		// 3.解决方法2 在ES6中用let代替var可以解决
			// 	})				
			// }
			
			// 4.forEach实现(更优雅)
			allButtons.forEach(button => {
				button.addEventListener('click',() =>{
					let checkbox = button.firstChild
					checkbox.checked = !checkbox.checked
					 button.style.backgroundColor=
						checkbox.checked? 'green' : 'red'
				})
			})
		</script>
	</body>
</html>
